/*
 * @Author: yuanxiang 
 * @Date: 2018-05-10 10:06:39 
 * @Last Modified by: hy
 * @Last Modified time: 2018-06-21 10:53:27
 */
<template>
      <bg-lay-out>
        <div slot="headerText">人力资源数据中心</div>
          <top-bar-sel slot="headerMain"  :topNav="topNav" @changeTab="onNav"></top-bar-sel>
          <div slot="main">
             <el-row type="flex">
              <div class="topLeftCon">
                  <div>在职人数(人)</div>
                  <b class="boldFont">
                    <i-count-up
                        :startVal="startVal"
                        :endVal="workNum"
                        :decimals="decimals"
                        :duration="duration"
                        :options="options"
                        @ready="onReady"
                      />
                  </b>
              </div>
              <div class="topRightCon">
                <el-col  class="topRightLCon">
                   <chart-lay-out>
                    <span slot="title">部门分布</span>
                    <bar-chart slot="main" v-model="personnelDistributionArr"></bar-chart>
                  </chart-lay-out>
                </el-col>
                <el-col class="topRightLCon">
                  <chart-lay-out :showLine="false">
                    <span slot="title">年龄分布</span>
                    <bar-chart slot="main" v-model="oldDistributionArr"></bar-chart>
                  </chart-lay-out>
                </el-col>
              </div>
            </el-row>
            <el-row type="flex">
              <div class="midCon">
                <el-row type="flex"  justify="space-between" style="width:100%">
                  <el-col>
                    <chart-lay-out>
                      <span slot="title">性别分布</span>
                      <pie-chart slot="main" v-model="genderArr" :option="pieOption"></pie-chart>
                    </chart-lay-out>
                  </el-col>
                  <el-col>
                    <chart-lay-out>
                      <span slot="title">工龄分布</span>
                      <pie-chart slot="main" v-model="workAgeArr" :option="pieOption"></pie-chart>
                    </chart-lay-out>
                  </el-col>
                  <el-col>
                    <chart-lay-out>
                      <span slot="title">层级分布</span>
                      <pie-chart slot="main" v-model="joblevelArr" :option="pieOption"></pie-chart>
                    </chart-lay-out>
                  </el-col>
                  <el-col>
                    <chart-lay-out :showLine="false">
                      <span slot="title">学历分布</span>
                      <pie-chart slot="main" v-model="degreeArr" :option="pieOption"></pie-chart>
                    </chart-lay-out>
                  </el-col>
                </el-row>
                <div class="lineCon">
                   <div class="lineImg"></div>
                </div>
                <el-row type="flex"  justify="space-between" style="width:100%">
                  <el-col>
                    <chart-lay-out>
                      <span slot="title">职系分布</span>
                      <pie-chart slot="main" v-model="gradesArr" :option="pieOption"></pie-chart>
                    </chart-lay-out>
                  </el-col>
                  <el-col>
                    <chart-lay-out>
                      <span slot="title">婚姻状态分布</span>
                      <pie-chart slot="main" v-model="maritalArr" :option="pieOption"></pie-chart>
                    </chart-lay-out>
                  </el-col>
                  <el-col>
                    <chart-lay-out>
                      <span slot="title">职称分布</span>
                      <bar-charts slot="main" v-model="jobTitleArr" :option="myOption"></bar-charts>
                    </chart-lay-out>
                  </el-col>
                  <el-col class="minTopLeftCon">
                    <chart-lay-out :showLine="false">
                      <span slot="title">籍贯分布</span>
                      <pie-chart slot="main" v-model="nativeArr" :option="pieOption"></pie-chart>
                    </chart-lay-out>
                  </el-col>
                </el-row>
              </div>
            </el-row>
            <el-row type="flex">
              <div class="bottomCon">
                <el-col>
                  <chart-lay-out>
                      <span slot="title">人员流动情况</span>
                      <bar-charts slot="main" v-model="mobilityArr" :option="mobilityOption"></bar-charts>
                  </chart-lay-out>
                </el-col>
                <el-col class="topRightLCon">
                  <chart-lay-out :showLine="false">
                      <span slot="title">人员职等情况</span>
                      <bar-chart slot="main" v-model="levelArr"></bar-chart>
                  </chart-lay-out>
                </el-col>
              </div>
            </el-row>
          </div>
      </bg-lay-out> 
</template>
<script>
import barChart from "@/components/Charts/barChart";
import barCharts from "@/components/Charts/barCharts";
import pieChart from "@/components/Charts/pieChart";
import chart from "@/components/Charts/newChart";
import chartLayOut from "@/components/Charts/chartLayOut";
import topBarSel from "@/components/branch/topBarSel";
import {
  GetDataByPlate,
  GetDataByDoubleTarget,
  GetDataByTarget,
  GetPlateOnOrLeaveJobList
} from "@/api/rl/index";
import ICountUp from "vue-countup-v2";
import { getTokenName } from "@/utils/auth";
import out from "@/components/model/index";
import bgLayOut from "@/components/bgLayOut/index";
export default {
  name: "index",
  components: {
    chart,
    ICountUp,
    out,
    bgLayOut,
    topBarSel,
    barChart,
    barCharts,
    pieChart,
    chartLayOut
  },
  computed: {
    tokenName() {
      return getTokenName();
    }
  },
  data() {
    return {
      pieOption: {
        hoverPosion: "center"
      },
      pieBorderW: 5,
      pieBorderC: "rgba(0,0,0,0.8)",
      startVal: 0,
      decimals: 0,
      duration: 2.5,
      options: {
        useEasing: true,
        useGrouping: true,
        separator: ",",
        decimal: ".",
        prefix: "",
        suffix: ""
      },
      myOption: {
        grid: {
          left: "20%"
        }
      },
      groupPlate: "9003",
      workNum: 0, //
      mobilityArr: [], // 人员流动情况
      levelArr: [], // 职等分部
      nativeArr: [], // 籍贯
      jobTitleArr: [], // 职称分布
      offsetL: 0, // 子组件相对父组件偏移量
      itemW: 0, // 子组件宽度
      nowId: 0,
      topNav: [
        {
          name: "全部",
          id: "0"
        },
        {
          name: "集团",
          id: "9003"
        },

        {
          name: "金控",
          id: "9005"
        },
        {
          name: "浩德投资",
          id: "9007"
        },
        {
          name: "产业园",
          id: "9006"
        },
        {
          name: "房联行",
          id: "9001"
        },
        {
          name: "浩德鑫置地",
          id: "9002"
        },
        {
          name: "浩德钢圈",
          id: "9004"
        },
        {
          name: "融媒运营",
          id: "9008"
        }
      ],
      maritalArr: [], // 婚姻状况分布
      gradesArr: [], // 直系分布
      degreeArr: [], // 学历分布
      joblevelArr: [], // 职级分布
      workAgeArr: [], // 工龄分布
      genderArr: [], // 员工性别分布
      oldDistributionArr: [], // 年龄分布
      mobilityOption: {
        labelDefault: 1
      },
      personnelDistributionArr: [] // 年龄分布
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    onReady: function(instance, CountUp) {},
    // 人员流动情况
    async fetchmobilityArr() {
      try {
        var now = new Date();
        var params = {
          startTime: "2018-01-01",
          endTime: this.$utils.parseTime(now),
          queryType: "11001", // 查询类型  11001 入职 11002 离职
          groupPlate: this.groupPlate
        };
        var res = await GetPlateOnOrLeaveJobList(params);
        var paramsTow = {
          startTime: "2018-01-01",
          endTime: this.$utils.parseTime(now),
          queryType: "11002", // 查询类型  11001 入职 11002 离职
          groupPlate: this.groupPlate
        };
        var resTwo = await GetPlateOnOrLeaveJobList(paramsTow);
        if (res.data.code === "0") {
          var result = res.data.result; // 入职
          resTwo = resTwo.data.result; // 离职
          var newResult = [];
          var newTesTwo = [];
          result.forEach(item => {
            var obj = {};
            obj.value = item.value;
            obj.name = item.xData;
            newResult.push(obj);
          });
          resTwo.forEach(twoItem => {
            var aa = {};
            aa.value = twoItem.value;
            aa.name = twoItem.xData;
            newTesTwo.push(aa);
          });

          var allData = [];
          var xData = [];
          newResult.forEach(item => {
            xData.push(item.name);
          });
          xData.forEach((xItem, id) => {
            var obj = {
              name: "",
              value: "",
              list: []
            };
            obj.name = xItem;
            var itemObj = {
              name: "入职",
              value: newResult[id].value
            };
            obj.list.push(itemObj);
            allData.push(obj);
          });
          allData.forEach((allItem, allId) => {
            var itemObj = {
              name: "离职",
              value: newTesTwo[allId].value
            };
            allItem.list.push(itemObj);
          });
          this.$set(this, "mobilityArr", allData);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 职等
    async fetchLevel() {
      try {
        var params = {
          queryType: "10010",
          groupPlate: this.groupPlate
        };
        var res = await GetDataByTarget(params);
        if (res.data.code === "0") {
          var result = res.data.result;
          this.$set(this, "levelArr", result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 籍贯
    async fetchNative() {
      try {
        var params = {
          queryType: "10012",
          groupPlate: this.groupPlate
        };
        var res = await GetDataByTarget(params);
        if (res.data.code === "0") {
          var result = res.data.result;
          this.$set(this, "nativeArr", result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 职称分布
    async fetchjobTitleArr() {
      try {
        var params = {
          queryType: "10013",
          innerQueryType: "10009",
          groupPlate: this.groupPlate
        };
        var res = await GetDataByDoubleTarget(params);
        if (res.data.code === "0") {
          var result = res.data.result;
          this.$set(this, "jobTitleArr", result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    onNav(id) {
      if (id === "1") {
        this.groupPlate = "0";
      } else {
        this.groupPlate = id;
      }
      $(".bg4Con").scrollTop(0);
      this.fetchData();
    },
    // 婚姻状况
    async fetchMarital() {
      try {
        var params = {
          queryType: 10014,
          groupPlate: this.groupPlate
        };
        var res = await GetDataByTarget(params);
        if (res.data.code === "0") {
          var result = res.data.result;
          this.$set(this, "maritalArr", result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 职系分布
    async fetchGrades() {
      try {
        var params = {
          queryType: 10003,
          groupPlate: this.groupPlate
        };
        var res = await GetDataByTarget(params);
        if (res.data.code === "0") {
          var result = res.data.result;
          this.$set(this, "gradesArr", result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 学历分布
    async fetchDegree() {
      try {
        var params = {
          groupPlate: this.groupPlate,
          queryType: 10008,
          innerQueryType: 10002
        };
        var res = await GetDataByDoubleTarget(params);
        if (res.data.code === "0") {
          var result = res.data.result;
          this.$set(this, "degreeArr", result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 职务层级分布
    async fetchJoblevelArr() {
      try {
        var params = {
          queryType: 10002,
          groupPlate: this.groupPlate
        };
        var res = await GetDataByTarget(params);
        if (res.data.code === "0") {
          var result = res.data.result;
          this.$set(this, "joblevelArr", result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 工龄分布
    async fetchworkAgeArr() {
      try {
        var params = {
          groupPlate: this.groupPlate,
          queryType: 10007,
          innerQueryType: 10002
        };
        var res = await GetDataByDoubleTarget(params);
        if (res.data.code === "0") {
          var result = res.data.result;
          this.$set(this, "workAgeArr", result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 员工性别分布
    async fetchgenderArr() {
      try {
        var params = {
          groupPlate: this.groupPlate,
          queryType: 10005,
          innerQueryType: 10002
        };
        var res = await GetDataByDoubleTarget(params);
        if (res.data.code === "0") {
          var result = res.data.result;
          this.$set(this, "genderArr", result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 年龄分布
    async fetcholdDistributionArr() {
      try {
        var params = {
          groupPlate: this.groupPlate,
          queryType: 10006,
          innerQueryType: 10002
        };
        var res = await GetDataByDoubleTarget(params);
        if (res.data.code === "0") {
          var result = res.data.result;
          this.$set(this, "oldDistributionArr", result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 获取在职人数
    getWorkNum(res) {
      var data = res.data.result;
      var workNum = "";
      data.list.forEach(item => {
        if (this.groupPlate === "0") {
          workNum = data.total;
          return;
        } else if (this.groupPlate === "9003" && item.name === "集团公司") {
          workNum = item.value;
        } else if (this.groupPlate === "9002" && item.name === "浩德鑫置地") {
          workNum = item.value;
        } else if (this.groupPlate === "9005" && item.name === "浩德金控") {
          workNum = item.value;
        } else if (this.groupPlate === "9007" && item.name === "浩德投资") {
          workNum = item.value;
        } else if (this.groupPlate === "9006" && item.name === "产业园") {
          workNum = item.value;
        } else if (this.groupPlate === "9001" && item.name === "房联行") {
          workNum = item.value;
        } else if (this.groupPlate === "9004" && item.name === "钢圈") {
          workNum = item.value;
        } else if (this.groupPlate === "9008" && item.name === "浩德融媒") {
          workNum = item.value;
        }
      });
      return workNum;
    },
    //  各部门人员分布
    async fetchPersonnelDistribution() {
      try {
        if (this.groupPlate === "0") {
          var res = await GetDataByPlate();
          if (res.data.code === "0") {
            var result = res.data.result.list;
            this.workNum = this.getWorkNum(res);
            this.$set(this, "personnelDistributionArr", result);
          }
        } else if (this.groupPlate !== "0") {
          res = await GetDataByPlate();
          if (res.data.code === "0") {
            this.workNum = this.getWorkNum(res);
          }
          var params = {
            groupPlate: this.groupPlate,
            queryType: "10016"
          };
          var resTarget = await GetDataByTarget(params);
          if (resTarget.data.code === "0") {
            var resultTarget = resTarget.data.result;
            this.$set(this, "personnelDistributionArr", resultTarget);
          }
        }
      } catch (e) {
        console.log(e);
      }
    },
    fetchData() {
      //  // 人员流动情况
      this.fetchmobilityArr();
      //  // 职等
      this.fetchLevel();
      //  // 籍贯分部
      this.fetchNative();
      // 职称分布
      this.fetchjobTitleArr();
      // //婚姻状况分布
      this.fetchMarital();
      // //职系分布
      this.fetchGrades();
      // //学历分布
      this.fetchDegree();
      // //职务层级分布
      this.fetchJoblevelArr();
      // //工龄分布
      this.fetchworkAgeArr();
      // //员工性别分布
      this.fetchgenderArr();
      // // 各部门人员分布
      this.fetchPersonnelDistribution();
      // //年龄分布
      this.fetcholdDistributionArr();
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../../../styles/base/_parameters";

.lineImg {
  width: 1712px;
  height: 8px;
  color: #2ff0d2;
  @include bgImg(minLine);
}
.lineCon {
  @include flex-jc;
  width: 100%;
  text-align: center;
}
.boldFont {
  margin-top: 6pt;
}
.minTopLeftCon {
  position: relative;
  margin-top: 10px;
}
.bottomCon {
  @include flex-dr-ic-jsb;
  margin-top: 20px;
  margin-bottom: 30px;
  width: 100%; /* 1813px => 100% */
  /* height: 393px; */
  color: #2ff0d2;
  @include moduleBg(bg_1813x393);
}
.midCon {
  @include flex-dc-jsb;
  width: 100%;
  /* height: 792px; */
  margin-top: 20px;
  @include moduleBg(bg_1813x792);
  color: #2ff0d2;
}
.topRightLCon {
  position: relative;
}
.topRightCon {
  @include flex-dr-ic-jsb;
  width: 1420px;
  /* height: 391px; */
  margin-top: 20px;
  margin-left: 20px;
  @include moduleBg(bg_1420x393);
  color: #2ff0d2;
}
.topLeftCon span {
  font-size: 72px;
  line-height: 72px;
  margin-top: 8pt;
}
.topLeftCon b {
  font-size: 72px;
  line-height: 77px;
}
.topLeftCon {
  @include flex-dc-ic-jc;
  margin-top: 20px;
  font-size: 20px;
  @include moduleBg(bg_373x393);
  width: 373px;
  /* height: 393px; */
  color: #2ff0d2;
}
</style>